<template>
  <div class="edit-page-container">
    <!-- 操作按钮区域 -->
    <a-card :bordered="false" class="action-buttons-card mb-6">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <icon-info-circle class="text-blue-600" />
          <span class="text-sm text-gray-600">请填写完整信息后提交</span>
        </div>
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="onSubmit">
            <template #icon><icon-plus /></template>
            {{ isEdit ? "更新申请" : "提交申请" }}
          </a-button>
          <a-button @click="goBack">
            <template #icon><icon-arrow-left /></template>
            返回
          </a-button>
        </a-space>
      </div>
    </a-card>

    <!-- 编辑内容 -->
    <div class="edit-content" v-loading="loading">
      <PurchaseApplicationEdit
        :params="editParams"
        @cancel="handleCancel"
        @ok="handleOk"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import {
  IconArrowLeft,
  IconPlus,
  IconInfoCircle,
} from "@arco-design/web-vue/es/icon";
import PurchaseApplicationEdit from "./PurchaseApplicationEdit.vue";

// 定义props
const props = defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
});

// 定义事件
const emit = defineEmits(["cancel", "ok"]);

// 加载状态
const loading = ref(false);
const submitLoading = ref(false);

// 编辑参数
const editParams = computed(() => props.params || {});

// 是否为编辑模式
const isEdit = computed(() => editParams.value.mode === "edit");

// 返回列表页
const goBack = () => {
  emit("cancel");
};

// 处理取消
const handleCancel = () => {
  emit("cancel");
};

// 处理确认
const handleOk = () => {
  emit("ok");
};

// 提交表单
const onSubmit = () => {
  // 这里可以触发子组件的提交逻辑
  // 或者直接调用handleOk
  handleOk();
};
</script>

<style scoped>
.edit-page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  background: #f7f8fa;
}

.action-buttons-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  flex-shrink: 0;
}

.edit-content {
  flex: 1;
  overflow-y: auto;
  background: #f7f8fa;
}

/* Utility classes */
.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.space-x-2 > * + * {
  margin-left: 8px;
}

.text-sm {
  font-size: 14px;
}

.text-blue-600 {
  color: #1890ff;
}

.text-gray-600 {
  color: #6b7280;
}

.mb-6 {
  margin-bottom: 24px;
}
</style>
